<template>
  <el-form
    ref="ruleForm"
    :size="size"
    :rules="currentRules"
    :model="$myProps.data"
    :label-width="labelWidth"
  >
    <el-row v-if="$myProps.columns">
      <el-card class="box-card">
        <form-item
          v-for="(column, prop) in $myProps.columns"
          :key="prop"
          :visible="column.visible"
          :prop="prop"
          v-bind="column"
          v-model="$myProps.data[prop]"
        >
        </form-item>
      </el-card>
    </el-row>

    <el-row
      v-else-if="$myProps.groups.length > 0"
      v-for="(group, index) in $myProps.groups"
      :key="index"
    >
      <el-card class="box-card">
        <div slot="header">
          <span>{{ group.title }}</span>
        </div>
        <form-item
          v-for="(column, prop) in group.column"
          :key="prop"
          :visible="column.visible"
          :prop="prop"
          v-bind="column"
          v-model="$myProps.data[prop]"
        >
        </form-item>
      </el-card>
    </el-row>

    <div class="form-btn" v-if="btnVisible">
      <el-button type="info" :size="size" @click="formCancel">返回</el-button>
      <el-button type="primary" :size="size" @click="formSubmit"
        >提交</el-button
      >
    </div>
  </el-form>
</template>


<script>
import formitem from "@/components/form/item";
export default {
  components: {
    "form-item": formitem,
  },
  props: {
    labelWidth: {
      type: String,
      default: "120px",
    },
    btnVisible: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "small",
    },
  },
  data() {
    return {};
  },
  created() {
    this.currentRules = this.$core.formRules(this.$myProps);
  },
  computed: {
    $myProps() {
      return this.$public.inheritProps(this);
    },
    $myListeners() {
      return this.$public.inheritListeners(this);
    },
  },
  methods: {
    validate(Callback) {
      this.$refs.ruleForm.validate((valid) => {
        Callback(valid);
      });
    },
    formCancel() {
      this.$emit("formCancel");
    },
    formSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("formSubmit", this.$myProps.data);
        }
      });
    },
  },
};
</script>


<style scoped>
.form-btn {
  padding-bottom: 10px;
}
.form-btn button {
  float: right;
  margin-left: 8px;
}
.el-card__header {
  padding: 8px 20px !important;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: "#fff" !important;
}
</style>